<template>
  <div>
    <el-card style="margin:20px 10px 20px" class="el-card">
      基本信息
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="新建" description="2023-04-17 18:33:01" />
        <el-step title="收获中" description="2023-04-17 18:34:53" />
        <el-step title="收货完成" description="2023-04-17 18:35:49" />
        <el-step title="上架中" description="2023-04-17 18:35:49" />
        <el-step title="上架完成" description="2023-04-17 18:40:00" />
      </el-steps>

    </el-card>
    <el-card style="margin:20px 10px 20px" class="el-card">
      <el-collapse v-model="activeNames" class="el-collapse-item__header">
        <el-collapse-item class="el-collapse-item__header" title="货主信息 " name="1">
          <!-- <div class="el-collapseDiv">阿巴阿巴</div> -->
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <el-card style="margin:20px 10px 20px" class="el-card">
      货品信息
    </el-card>
    <el-card style="margin:20px 10px 20px" class="el-card">
      运输信息
    </el-card>
    <el-card style="margin:20px 10px 20px" class="el-card">
      任务信息
    </el-card>
    <el-collapse>
      <el-collapse-item title="点击展开">
        <el-card>
        <!-- 卡片内容 -->
        </el-card>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 5,
      activeNames: ['1']
    }
  }

}
</script>

<style scoped lang='scss'>
.el-card{
  border-top-left-radius: 10px; /* 设置左上角圆角大小 */
  border-top-right-radius: 10px; /* 设置右上角圆角大小 */
  border-bottom-left-radius: 10px; /* 设置左下角圆角大小 */
  border-bottom-right-radius: 10px; /* 设置右下角圆角大小 */
}
.el-collapse-item__header{
    border:none

}
.el-collapseDiv{
        display: flex;
        align-content: center;
        width: 500px;
        height: 200px;
        border: 1px solid #333;
        background-color: #fdfcf9;
    }
</style>
